<template>
  <div class="info-content">
    <div class="page-main-title">设备管理</div>
    <div class="info-main-content">
      <div class="tab" v-if="$route.query.parkType ==='1'">
        <div
          class="tab-item"
          :class="{ active: currentTab === item }"
          v-for="(item, index) in tabData"
          @click="currentTab = item"
        >{{ item }}</div>
      </div>
      <YtjDeviceSetting v-if="currentTab === '一体机'"></YtjDeviceSetting>
      <div v-if="currentTab === '外置屏'" style="padding: 20px">开发中...</div>
      <EnvironmentGun v-if="currentTab === '视频监控'"></EnvironmentGun>
      <PosAndIntercom v-if="currentTab === '刷卡对讲机'"></PosAndIntercom>
    </div>
  </div>
</template>

<script>
import YtjDeviceSetting from "./YTJ_device/index.vue";
import EnvironmentGun from "./EnvironmentGun/index.vue";
import PosAndIntercom from "./PosAndIntercom/index.vue";
export default {
  name: "deviceSetting",
  components: {
    YtjDeviceSetting,
    EnvironmentGun,
    PosAndIntercom
  },
  created() {
    if (this.$route.query.parkType === "0") {
      this.currentTab = "视频监控";
    }
  },
  data() {
    return {
      tabData: ["一体机", "外置屏", "视频监控", "刷卡对讲机"],
      currentTab: "一体机"
    };
  }
};
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
